import { MehOutlined } from '@ant-design/icons';
import { Col, Image, Row } from 'antd';
import React, { Component } from 'react';
import styles from './CardTip.less';
import TipImg_01 from '@/assets/img/home/mainTip01.png';
import TipImg_02 from '@/assets/img/home/mainTip02.png';
import TipImg_03 from '@/assets/img/home/mainTip03.png';
import TipImg_04 from '@/assets/img/home/mainTip04.png';

export default class Card_Tip extends Component {
  GetTipImage(order) {
    return Img[order];
  }
  render() {
    const { title, tip, order } = this.props;
    const Img = {
      No_1: TipImg_01,
      No_2: TipImg_02,
      No_3: TipImg_03,
      No_4: TipImg_04,
    };
    return (
      <div style={{ height: '50%', width: '100%' }}>
        <Row>
          <Col span={6}>
            <div className={styles.CardTipContain}>
              <Image width={'100%'} height="100%" src={Img[order]} preview={false} />
            </div>
          </Col>
          <Col span={18} className={styles.CardTipMessge}>
            <Row className={styles.Tip}>{tip}</Row>
            <Row className={styles.Title}>{title}</Row>
          </Col>
        </Row>
      </div>
    );
  }
}
